<template>
	<view class="nice-grade" :style="[style]">
		<view class="nice-grade-icons">
			<image class="nice-grade-icons-star" :src="levels[level].icon" mode="aspectFit"></image>
			<image v-if="showCrown" class="nice-grade-icons-crown" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_huangguan@2x.png" mode="aspectFit"></image>
			<!-- <image class="nice-grade-icons-crown" src="../../pagesUser/static/img/ic_huangguan@2x.png" mode="aspectFit"></image> -->
			<view class="nice-grade-icons-level">{{leftText}}</view>
		</view>
		<text>{{rightText}}</text>
	</view>
</template>

<script>
	const levels = [{
		icon: 'https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_biaozhi_daren_0@2x.png',
		color: '#D61719',
		bgColor: 'rgba(225, 87, 89, 0.3)'
	}, {
		icon: 'https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_biaozhi_daren_3@2x.png',
		color: '#fff',
		bgColor: 'rgba(88,87,224,0.3)'
	}, {
		icon: 'https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_biaozhi_daren_2@2x.png',
		color: '#79C531',
		bgColor: 'rgba(121,197,49,0.3)'
	}, {
		icon: 'https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_biaozhi_daren_1@2x.png',
		color: '#F7AE06',
		bgColor: 'rgba(247,174,6,0.3)'
	}, {
		icon: 'https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_biaozhi_daren_1@2x.png',
		color: '#FFB6C1',
		bgColor: 'rgba(255, 182, 193, 0.3)'
	}, {
		icon: 'https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_biaozhi_daren_5.png',
		color: '#FFB6C1',
		bgColor: 'rgba(255, 182, 193, 0.3)'
	}, {
		icon: 'https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_biaozhi_daren_6.png',
		color: '#FFB6C1',
		bgColor: 'rgba(255, 182, 193, 0.3)'
	}, {
		icon: 'https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_biaozhi_daren_7.png',
		color: '#FFB6C1',
		bgColor: 'rgba(255, 182, 193, 0.3)'
	}]
	export default {
		data() {
			return {
				levels
			};
		},
		props: {
			level: {
				type: Number,
				default: 0
			},
			showCrown: {
				type: Boolean,
				default: true
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			}
		},
		computed: {
			style() {
				return {
					color: this.levels[this.level].color,
					'background-color': this.levels[this.level].bgColor
				}
			}
		}
	}
</script>

<style lang="scss">
	.nice-grade {
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		padding: 0 20rpx 0 40rpx;
		margin-left: 30rpx;
		position: relative;
		font-size: 22rpx;
		&-icons {
			position: absolute;
			top: -8rpx;
			left: -20rpx;
			&-star {
				width: 50rpx;
				height: 50rpx;
				vertical-align: bottom;
			}
			&-crown {
				width: 40rpx;
				height: 40rpx;
				left: -12rpx;
				top: -18rpx;
				position: absolute;
			}
			&-level {
				position: absolute;
				color: #FFFFFF;
				font-size: 18rpx;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
		&-icon {
			width: 55rpx;
			height: 55rpx;
			position: absolute;
			left: -15rpx;
			top: -5rpx;
		}
		&-crown {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			left: -22rpx;
			top: -20rpx;
		}
		&-level {
			position: absolute;
			color: #FFFFFF;
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
			left: -6rpx;
			top: 6rpx;
			text-align: center;
			font-size: 22rpx;
		}
	}
</style>
